<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-10 09:04:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-10 10:23:39
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./data.js"></script>
    <style>
        @media screen and (max-width: 1024px) {
            html {
                font-size: 42.66px !important;
            }
        }

        @media screen and (min-width: 1680px) {
            html {
                font-size: 80px !important;
            }
        }
        div{
            width: 7.8125rem;
            height: 3.125rem;
            background: pink;
        }
    </style>
</head>

<body>
    <div id="main" style="width: 1500px;height:600px;"></div>
    <script>
        // 将json格式的数据 转成  js对象 
        var data = JSON.parse(mydata);
        // console.log(typeof data);
        // data['items']对象
        // data['items']['item'] 数组
        // console.log(data['items']['item']);
        // 对数组进行遍历 
        var arr = [];
        for (var i in data['items']['item']) {
            var obj = {};
            // console.log(data['items']['item'][i]);
            obj['title'] = data['items']['item'][i]['title'];
            obj['pic_url'] = data['items']['item'][i]['pic_url'];
            obj['price'] = data['items']['item'][i]['price'];
            obj['sales'] = data['items']['item'][i]['sales'];
            obj['seller_nick'] = data['items']['item'][i]['seller_nick'];
            obj['detail_url'] = data['items']['item'][i]['detail_url'];
            arr.push(obj);
        }
        // console.log(arr);

        // 排序  
        arr.sort(function (a, b) {
            return b['price'] - a['price'];
        })

        var new_arr = arr.slice(0, 10);
        console.log(new_arr);
        new_arr.forEach(function (item, index) {
            item['title'] = item['title'].split(' ')[3].replace("\)", '').replace("\(", '');
        })
        // console.log(new_arr);
        // [{},{}]

        var titles = new_arr.map(function (item) {
            return item['title'];
        })

        var sales = new_arr.map(function (item) {
            return item['price'];
        })

        var nicks = new_arr.map(function (item) {
            return item['seller_nick'];
        })
        // console.log(titles);
        // console.log(sales);
        console.log(titles);
    </script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 配置项和数据
        option = {
            title: {
                text: '千锋电商产品价格'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            xAxis: {
                type: 'category',
                data: titles,
                boundaryGap: false,
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            series: [{
                    name: '价格',
                    data: sales,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                },
                {
                    name: '销量',
                    data: sales,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(200, 200, 200, 0.3)'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>